<template>
  <div class="yardsBox">
    <div class="yardsContent">
      <div class="yardsDiv">
        <div>
          <el-button type="success" plain>SN码（序列码）</el-button>
        </div>
        <svg id="jsbarcode1" />
        <!-- <div>sn码</div> -->
      </div>
      <div class="yardsDiv">
        <div>
          <el-button type="success" plain>装配码（ZN码）</el-button>
        </div>
        <div class="qrcode" ref="qrCodeUrl"></div>
        <div class="codetext">{{ form.assemblyCode }}</div>
      </div>
      <div class="yardsDiv">
        <div>
          <el-button type="success" plain>售后码</el-button>
        </div>
        <div class="qrcode" ref="qrCodeUrl1"></div>
        <div class="codetext">{{ form.aftersaleCode }}</div>
      </div>

      <!-- 铭牌模板 -->
      <div style="width: 50vw;">
        <div class="templateDiv">
          <h3>{{ form.templateTitle }}</h3>
          <div class="temTitle">
            <div>
              <div class="rowDiv" v-for="(item) in leftList" :key="item.statsCode">
                <span>{{ item.statsName}}：</span>
                <span class="line"></span>
              </div>
            </div>
            <div>
              <div class="rowDiv" v-for="(item) in rightList" :key="item.statsCode">
                <span>{{ item.statsName}}：</span>
                <span class="line"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
// proSop
import { getYards } from "@/api/apppro/index";
import QRCode from "qrcodejs2";
import JsBarcode from "jsbarcode";
export default {
  name: "threeYards",
  data() {
    return {
      imgList: [],
      assemblyCode: "SNZN03PL00378501",
      leftList: [],
      rightList: [],
      form: {}
    };
  },
  props: {
    formObj: Object
  },
  created() {
    // this.getList();
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      getYards(this.formObj.workorderCode).then(res => {
        console.log(res, "==========res===========");
        this.form = res.data.data || {};
        
        // this.imgList = res?.data?.fileList || [];
        this.creatQrCode();
        JsBarcode(document.getElementById("jsbarcode1"), this.form.snCode);
        if (res.data.stats && res.data.stats.length > 0) {
          this.leftList = res.data.stats.filter((item, index) => {
            return item.sequence == "0";
          });
          this.rightList = res.data.stats.filter((item, index) => {
            return item.sequence == "1";
          });
        }
      });
    },
    creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.form.assemblyCode, // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
      var qrcode1 = new QRCode(this.$refs.qrCodeUrl1, {
        text: this.form.aftersaleCode, // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    }
  }
};
</script>
    
<style rel="stylesheet/scss" lang="scss" scoped>
.yardsBox {
  width: 100%;
}
.yardsContent {
  margin-top: 20px;
  // text-align: center;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  div {
    font-size: 18px;
  }
}
.yardsDiv {
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  button {
    margin-bottom: 10px;
    font-size: 18px;
  }
  .codetext {
    margin-top: 10px;
  }
}
.templateDiv {
  margin-left: 10px;
  text-align: center;
  padding: 15px;
  padding-top: 0px;
  /* box-shadow: 3px 3px 3px 3px #eee; */
  border: 1px solid #aaa;
}
.templateDiv h3 {
  font-size: 20px;
  line-height: 40px;
  font-weight: 600;
}
.rowDiv {
  display: flex;
  align-items: flex-end;
  margin: 0 10px;
  margin-bottom: 25px;
  font-size: 16px;
}
.temTitle {
  display: flex;
  justify-content: center;
  /* justify-content: space-between; */
}
.temTitle > div {
  flex: 1;
}
.temTitle > div .rowDiv span:nth-child(1) {
  display: inline-block;
  min-width: 160px;
  height: 20px;
  text-align: right;
  /* white-space: nowrap; */
  text-align: justify;
}
.temTitle > div .rowDiv span:nth-child(1)::after {
  content: "";
  display: inline-block;
  width: 100%;
}
.temTitle > div {
  margin-left: 15px;
}
/* .rowDiv span:nth-child(1){
  line-height: 36px;
} */
.line {
  /* margin-left: 10px; */
  display: block;
  height: 2px;
  width: 50%;
  background-color: #999;
}
</style>
    